<template>
  <main class="wss-container">
    <div class="label-box-content">
      <el-row :gutter="20" type="flex">
        <el-col :span="10">
          <NewCard title="关于问三师">
            <!-- 是ios和安卓就隐藏 -->
            <div
              class="dowApp pd30"
              v-if="!['android', 'ios'].includes($isDevice)"
            >
              <p class="boxTitle">应用下载</p>
              <ul>
                <li>
                  <span>iPad</span>
                  <svg-icon icon-class="ipad_icon" />
                  <div class="boxErOrBtn">
                    <p>
                      <canvas id="canvas" ref="ipadCanvas"></canvas>
                      <!-- <svg-icon icon-class="windows_icon" /> -->
                    </p>
                  </div>
                </li>
                <li>
                  <span>安卓平板</span>
                  <svg-icon icon-class="android_icon" />
                  <div class="boxErOrBtn">
                    <p>
                      <canvas id="canvas" ref="androidPadCanvas"></canvas>
                      <!-- <svg-icon icon-class="android_icon" /> -->
                    </p>
                  </div>
                </li>
                <!-- <li>
                  <span>IOS</span>
                  <svg-icon icon-class="ios_icon" />
                  <div class="boxErOrBtn">
                    <p>
                      <img src="~@/assets/images/er.png" alt="" />
                      <svg-icon icon-class="ios_icon" />
                    </p>
                  </div>
                </li> -->
                <li>
                  <span>安卓/鸿蒙</span>
                  <svg-icon icon-class="harmony_icon" />
                  <div class="boxErOrBtn">
                    <p>
                      <canvas id="canvas" ref="androidCanvas"></canvas>
                      <!-- <svg-icon icon-class="harmony_icon" /> -->
                    </p>
                  </div>
                </li>
                <li>
                  <span>Mac</span>
                  <svg-icon icon-class="mac_icon" />
                  <div class="boxErOrBtn el-btn">
                    <p>
                      <a :href="macUrl">
                        <el-button round size="mini">下载客户端</el-button>
                      </a>
                    </p>
                  </div>
                </li>
                <li>
                  <span>Windows</span>
                  <svg-icon icon-class="windows_icon" />
                  <div class="boxErOrBtn el-btn">
                    <p>
                      <a :href="windowUrl">
                        <el-button round size="mini">下载客户端</el-button>
                      </a>
                    </p>
                  </div>
                </li>
              </ul>
            </div>
            <div class="contactUs">
              <p class="boxTitle pd30">联系我们</p>
              <div class="contactEmail">
                <div>
                  <p>Email</p>
                  <span>kf@wensanshi.cn</span>
                </div>
              </div>
              <el-collapse @change="aboutUsChange">
                <el-collapse-item title="机构简介" name="1" class="pd30" @click.native="handlerAbBtn">
                  <div class="org-coll" v-html="aboutUs.content" v-if="aboutUs&&aboutUs.content"></div>
                  <a @click="handlerAbBtn">阅读原文</a>
                </el-collapse-item>
              </el-collapse>
            </div>
            <div class="agreement">
              <p class="boxTitle pd30">协议</p>
              <div class="issuesList">
                <el-collapse
                  @change="collapseChange"
                  v-model="activeName"
                  accordion
                >
                  <el-collapse-item
                    :title="iss.title"
                    :name="index"
                    v-for="(iss, index) in issuesList"
                    :key="iss.id"
                  >
                    <div>
                      <span v-html="iss.content" v-if="iss.content"></span>
                      <a @click="handlerIssues">阅读原文</a>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="14">
          <template v-if="isclick">
            <Details :selectIss="selectIss"></Details>
          </template>
          <div v-else class="featuredContent">
            <template>
              <FeaturedContent></FeaturedContent>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
  </main>
</template>

<script>
import Details from "./details.vue";
import NewCard from "@/wss/components/newCard.vue";
import FeaturedContent from "../../../../components/FeaturedContent/index.vue";

import { getaboutUslist } from "../../../../BMViews/api/aboutUs/aboutUs";
import { getApplicationListApi } from "@/BMViews/api/login.js";
export default {
  name: "aboutUs",
  components: { NewCard, Details, FeaturedContent },
  data() {
    return {
      activeName: "",
      aboutUs:{},//机构简介
      selectIss:{},//当前点击的
      issuesList: [],
      isclick: false,

      windowUrl:'',//window下载链接
      macUrl:'',//mac下载链接
      iPadUrl:'',//iPad下载链接
      padUrl:'',// 安卓平板下载链接
      iosUrl:'',//ios下载链接
      androidUrl:'',//安卓下载链接
    };
  },
  created() {
    this.getaboutUslistfn();

    this.getApplicationList(1)// 获取window下载链接
    this.getApplicationList(2)// 获取mac下载链接
    this.getApplicationList(3)// 获取iPad下载链接
    this.getApplicationList(4)// 获取安卓平板下载链接
    this.getApplicationList(5)// 获取ios下载链接
    this.getApplicationList(6)// 获取安卓下载链接
  },
  methods: {
    async getaboutUslistfn() {
      let { data, code } = await getaboutUslist({
        type: "14",
        typeId: "5,6",
      });
      if (code == 200) {
        let list = JSON.parse(JSON.stringify(data.rows))
        // 过滤机构简介出来
        this.aboutUs = list.find(item=>{
          return item.typeId == '机构简介'
        })
        // 去掉机构简介
        this.issuesList = list.filter(item=>{
          return item.typeId != '机构简介'
        })
        console.log(this.issuesList,'去掉机构简介去掉机构简介');
      }
    },

    // 当点击机构简介的面板时
    aboutUsChange(){
      this.selectIss = this.aboutUs
    },

    //单击机构简介阅读原文
    handlerAbBtn(){
      this.selectIss = this.aboutUs
      this.isclick = true;
    },

    // 当前激活面板改变时触发
    collapseChange(index) {
      // typeof index == "number" ? (this.isclick = true) : (this.isclick = false);
      this.selectIss = this.issuesList[index];
    },

    //单击阅读原文
    handlerIssues(iss) {
      this.isclick = true;
    },

    // 获取下载应用的信息 1Windows 2mac 3iPad webview 4安卓webview 5i0S 6安卓
    async getApplicationList(type){
      let result = await getApplicationListApi({type})
      if(result.code==200){
        // 获取.boxErOrBtn的元素
        let boxErOrBtn = document.querySelector('.boxErOrBtn>p')
        if(result.data){
          if(type == 1) this.windowUrl = result.data.url
          if(type == 2) this.macUrl = result.data.url
          if(type == 3){
            // ipad
            this.iPadUrl = result.data.url
            var QRCode = require("qrcode");
            QRCode.toCanvas(
              this.$refs.ipadCanvas,
              this.iPadUrl,
              { width: boxErOrBtn.clientWidth, height: boxErOrBtn.clientWidth, quality: 1 },
              function (error) {
                if (error) console.error(error);
                console.log("success!");
              }
            );
          } 
          if(type == 4){
            // 安卓平板
            this.padUrl = result.data.url
            var QRCode = require("qrcode");
            QRCode.toCanvas(
              this.$refs.androidPadCanvas,
              this.padUrl,
              { width: boxErOrBtn.clientWidth, height: boxErOrBtn.clientWidth, quality: 1 },
              function (error) {
                if (error) console.error(error);
                console.log("success!");
              }
            );
          }
          if(type == 5) this.iosUrl = result.data.url
          if(type == 6) {
            // 安卓和鸿蒙  
            this.androidUrl = result.data.url
            var QRCode = require("qrcode");
            QRCode.toCanvas(
              this.$refs.androidCanvas,
              this.androidUrl,
              { width: boxErOrBtn.clientWidth, height: boxErOrBtn.clientWidth, quality: 1 },
              function (error) {
                if (error) console.error(error);
                console.log("success!");
              }
            );
          }
        }
      }
    },

  },
};
</script>

<style scoped>
/* 高度 */
::v-deep .label-box-content,
::v-deep .label-box-content .el-row,
::v-deep .label-box-content .el-col,
::v-deep .label-box-content .el-col > div,
::v-deep .label-box-content .el-card,
::v-deep .label-box-content .el-card__body {
  height: 100%;
}
::v-deep .label-box-content .el-card__body {
  position: relative;
  padding: 0 0 30px 0;
}
::v-deep .label-box-content .el-card__body .top {
  margin-left: 30px;
  margin-right: 30px;
}
::v-deep .label-box-content .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .label-box-content .el-card__body > div::-webkit-scrollbar {
  width: 0px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}

/* 下载应用 */
.boxTitle {
  font-size: 12px;
  color: #999;
  margin: 0;
}
.dowApp {
  margin-top: 30px;
}
.dowApp ul {
  display: flex;
  justify-content: space-between;
}
.dowApp ul > li {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 18.5%;
  /* height: 160px; */
  margin: 30px 0;
  font-size: 14px;
  font-weight: bold;
  border-radius: 10px;
  border: 1px solid #ecedf0;
  background-color: #fff;
  text-align: center;
  transition: all 0.3s;
  overflow: hidden;
}
.dowApp ul > li > span {
  height: 20%;
  text-align: center;
}
.dowApp ul > li > svg {
  display: block;
  font-size: 50px;
  height: 50%;
}

.dowApp ul > li .boxErOrBtn {
  position: absolute;
  top: 100%;
  display: flex;
  justify-content: center;
  transition: all 0.3s;
}
.dowApp ul > li > div {
  position: relative;
  width: 90%;
  margin: 0;
  /* height: 50%; */
}
.dowApp ul > li > div.el-btn p {
  border: 0;
}
.dowApp ul > li > div.el-btn p a{
  width: 100%;
}
.dowApp ul > li > div.el-btn .el-button {
  width: 100%;
  padding: 0 10px;
  margin-top: 30%;
  line-height: 30px;
  border: 0;
  font-size: 12px;
}
.dowApp ul > li > svg {
  transition: all 0.3s;
}
.dowApp ul > li p {
  position: relative;
  /* border: 2px solid #fff; */
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  display: flex;
}
.dowApp ul > li p > img {
  width: 100%;
  height: 100%;
  border: 2px solid #f1f3ff;
}
.dowApp ul > li p > svg {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 14px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 3px;
}

.dowApp ul > li .el-btn .el-button:hover {
  color: #f87a23;
  background-color: #fff;
}
.dowApp ul > li:hover {
  background-color: #f1f3ff;
}
.dowApp ul > li:hover > svg {
  opacity: 0;
}
.dowApp ul > li:hover .boxErOrBtn {
  top: 30%;
}
@media (max-width: 1720px) {
  .dowApp ul > li:hover .boxErOrBtn {
    top: 40%;
  }
}

/* 下载应用 end*/

/* 联系我们 */
.contactEmail {
  padding: 0px 30px;
  margin-top: 20px;
}
.contactEmail > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #efefef;
}
.contactEmail > div p {
  font-size: 16px;
  font-weight: bold;
}
.contactEmail > div span {
  color: #999;
  font-size: 14px;
  font-weight: 400;
}
.contactEmail:hover {
  background-color: #f4f5f8;
}

.org-coll >>> p{
  display: none;
}
.org-coll >>> p:first-child{
  display: block;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}

.el-collapse {
  border-top: 0;
  border-bottom: 0;
}
.el-collapse .el-collapse-item {
  padding-top: 5px;
}

::v-deep .el-collapse .el-icon-arrow-right:before {
  content: "\E6DF";
}
::v-deep .el-collapse .el-icon-arrow-right.is-active {
  transform: rotate(-180deg);
}

::v-deep .contactUs .el-collapse-item__header {
  font-weight: bold;
  font-size: 16px;
}

::v-deep.agreement .el-collapse .el-collapse-item__header {
  background-color: transparent;
  font-weight: bold;
  font-size: 16px;
}
::v-deep .agreement .el-collapse .el-collapse-item__wrap {
  background-color: transparent;
}
::v-deep .agreement .el-collapse .el-collapse-item__content > div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
::v-deep .el-collapse .el-collapse-item__content > a {
  color: #39486f;
}

/* 协议 */
.agreement {
  margin-top: 40px;
}
.agreement .boxTitle {
  margin-bottom: 12px;
}

/* 问题列表 */
.issuesList .el-collapse {
  border: 0;
}
.issuesList .el-collapse-item {
  padding: 0 30px;
}
.issuesList >>> .el-collapse-item__wrap,
.issuesList >>> .el-collapse-item__header {
  background-color: transparent !important;
}
.issuesList >>> .el-collapse-item__header {
  font-weight: bold;
  font-size: 16px;
  height: auto;
  padding: 11px 0;
}
.issuesList >>> .el-collapse-item__content > div > span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.issuesList >>> .el-collapse-item__content > div > span p {
  margin: 0;
  display: inline;
}
.issuesList >>> .el-collapse-item__content > div > a {
  color: #39486f;
}

.issuesList >>> .el-collapse-item__header.is-active {
  padding-bottom: 0;
  line-height: 36px;
}
.issuesList .el-collapse-item:hover,
.issuesList .el-collapse-item.is-active,
.issuesList >>> .el-collapse-item__header.is-active {
  background-color: #f4f5f8;
}
/* 組件樣式衝突 */
>>> .featuredContent .el-card__body {
  padding: 0 30px;
}
>>> .featuredContent .el-card__body > .top {
  margin: 0;
}
</style>